<div class="wrapper wrapper-content" ng-controller="SVGMasterController">
	<div class="row">
		<div class="col-lg-12">
			<div class="tabs-container">
				<uib-tabset>
					<uib-tab heading="{{'COMMON.SVG' | translate}}">
						<div class="panel-body" ng-controller="SVGController">
                            <div class="col-md-3">
							   <a ng-click="addSVG()" class="btn btn-primary btn-rounded  btn-outline" href=""><i class="fa fa-plus-circle"></i> {{'SVG.ADD_SVG' | translate}}</a>
                               <a ng-click="importSVG()" class="btn btn-primary btn-rounded  btn-outline" href=""><i class="fa fa-plus-circle"></i> {{'SETTING.IMPORT' | translate}}</a>
                            </div>
                            <div class="col-md-9">
                                <input type="text" class="form-control m-b-xs"
                                       placeholder="{{'SETTING.SEARCH' | translate}}"
                                       ng-model="searchKeyword"
                                       ng-keyup="searchSVGs()">
                            </div>
              <table class="footable table table-bordered table-hover" data-sort="true" data-page-size="15">
								<thead>
									<tr>
										<th class="text-center" data-type="numeric">{{'SETTING.ID' | translate}}</th>
										<th class="text-center">{{'SETTING.NAME' | translate}}</th>
										<th class="text-center">{{'SETTING.DESCRIPTION' | translate}} ({{'SETTING.OPTIONAL' | translate}})</th>
										<th class="text-center">{{'SETTING.ACTION' | translate}}</th>
									</tr>
								</thead>
								<tbody>
									<tr ng-repeat=" svg in svgs">
										<td class="text-center">{{  svg.id }}</td>
										<td class="text-center">{{  svg.name }}</td>
										<td class="text-center">{{  svg.description }}</td>
										<td class="text-center">
											<a ng-click="editSVG(svg)" class="btn btn-primary btn-rounded btn-xs" >{{'SETTING.EDIT' | translate}}</a>
											<a ng-click="deleteSVG(svg)" class="btn btn-danger btn-rounded btn-xs" >{{'SETTING.DELETE' | translate}}</a>
                      <a ng-click="exportSVG(svg)" class="btn btn-danger btn-rounded btn-xs" >{{'SETTING.EXPORT' | translate}}</a>
											<a ng-click="cloneSVG(svg)" class="btn btn-danger btn-rounded btn-xs" >{{'SETTING.CLONE' | translate}}</a>
										</td>
									</tr>
								</tbody>
                <tfoot class="hide-if-no-paging">
                  <tr>
                      <td colspan="6">
                          <ul class="pagination pull-right"></ul>
                      </td>
                  </tr>
                </tfoot>
							</table>
						</div>
					</uib-tab>

					<uib-tab heading="{{'SVG.PREVIEW' | translate}}">
            <div class="panel-body" ng-controller="SVGPreviewController">
              <div class="row">
                <div class="col-lg-3">
                  <div class="panel panel-info">
                    <div class="panel-heading">
                      {{'COMMON.SVG' | translate}}
                    </div>
                    <div class="panel-body" >
                      <form role="form">
                        <div class="form-group no-margin"><label>{{'SVG.SELECT_SVG' | translate}}</label>
                          <ui-select  on-select="changeSVG($item,$model)" ng-model="currentSVG.selected" theme="bootstrap">
                            <ui-select-match placeholder="{{'COMMON.PLACEHOLDER' | translate}}">{{$select.selected.name}}</ui-select-match>
                            <ui-select-choices repeat="svg.id as svg in svgs | filter: $select.search">
                              <div ng-bind-html="svg.name | highlight: $select.search"></div>
                            </ui-select-choices>
                          </ui-select>
                        </div>
                      </form>
                    </div>
                  </div>
                </div>
                <div class="col-lg-9">
                  <div class="panel panel-primary">
                    <div class="panel-heading">
                      {{currentSVG.name}}{{'SVG.N_S_PREVIEW' | translate}}
                    </div>
                    <div class="panel-body" >
                      <div style="height: 100%; width: 100%; zoom: 100%;" id="preview-svg"></div>
                  </div>
                </div>
                </div>
            </div>
          </div>
          </uib-tab>

		    </uib-tabset>

	</div>
</div>
</div>
</div>
